<template>
  <div style="position: absolute;height: 100%;width: 100%;display: flex;align-items: center;justify-content: center;">
    <div :style="{ width: 16 / 9 * (height - 100) + 'px', height: height + 'px', padding: '60px 0 40px' }">
      <div class="play-video" v-show="isPlay" id="elId"></div>
    </div>
    <div v-show="!isPlay" style="color: #08979C;font-size: 25px;">暂无视频源</div>
    <iframe class="iframe-box" id="proxyIframe" :src="iframeSrc" frameborder="0"></iframe>
  </div>
</template>

<script>
import Player from 'xgplayer'
import 'xgplayer/dist/index.min.css'
import FlvPlugin from 'xgplayer-flv'
import { getVideo } from "@/api/video";

export default {
  name: 'CusPlayer',
  components: {},
  props: {
    screenHeight: {
      type: Number,
      default: 300
    },
    height: {
      type: Number,
      default: 500
    },
    width: {
      type: Number,
      default: 500
    },
  },
  computed: {
    iframeSrc() {
      return `https://vip.bljiex.com/so.php?wd=${this.keyword}`
    }
  },
  data() {
    return {
      isPlay: false,
      player: null,
      keyword: '田耕纪'
    };
  },
  created() {
    this.init()
  },
  mounted() { },
  methods: {
    init() {
      // getVideo({ wd: this.keyword }).then(
      //   (res) => {
      //     console.log(res)
      //   }
      // )
    },
    createPlayer(url) {
      if (!url) {
        return;
      }
      if (this.player) {
        this.changeVideo(url);
        return;
      }
      this.isPlay = true;
      const config = {
        id: "elId",
        url: url,
        // "playsinline": true,
        plugins: [],
        fluid: true,
        autoplay: true,
        autoplayMuted: true,
        isLive: true,
        playsinline: false,
        screenShot: false,
        whitelist: [''],
        ignores: ['time'],
        closeVideoClick: true,
        controls: false,
        width: 300,
        height: this.height,
        customConfig: {
          isClickPlayBack: false
        },
        flvOptionalConfig: {
          enableWorker: true,
          enableStashBuffer: false, //关闭缓存
          stashInitialSize: 2048, //缓存大小2m
          lazyLoad: false,
          lazyLoadMaxDuration: 40 * 60,
          autoCleanupSourceBuffer: true,
          autoCleanupMaxBackwardDuration: 35 * 60,
          autoCleanupMinBackwardDuration: 30 * 60
        } //flv.js可选配置项 [flv.js配置](https://github.com/bilibili/flv.js/blob/master/docs/api.md#config)
      }
      config.plugins.push(FlvPlugin)
      this.player = new Player(config)
      console.log(88888888888, this.player);

      this.player.on('play', () => {
      });
      this.player.on('ended', () => {
      });
      this.player.on('blur', () => {
      });

      this.player.on('error', () => {
      });

      // // 点击视频时间，设置selectIndex
      // this.player.video.addEventListener('click', () => {
      //   this.$emit('clickPlayer');
      // });
    },

    changeVideo(url) {
      this.player.src = url;
    },

    closePlayer() {
      this.isPlay = false;
      if (this.player) {
        this.player.destroy();
        this.player = null
      }
    }
  },

  beforeDestroy() {
    if (this.player) {
      this.player.destroy();
      this.player = null
    }
  }
};
</script>
<style scoped>
.iframe-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.btn-hover:hover {
  color: #08979c;
  cursor: pointer;
}

.btn-hover {
  color: #ffffff;
}

.play-video {
  position: relative !important;
  height: 100% !important;
  width: 100% !important;
  padding-top: 0px !important;
}

.app-close-btn {
  position: absolute;
  top: 0px;
  right: 5px;
  z-index: 500;
  display: none;
}

.app-close-btn-c {
  color: #aaffff;
  font-size: 25px;
  pointer-events: auto;
  z-index: 500;
}
</style>
